<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="book" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/nav.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/foot.css">
    <script src="../../boot/plugin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">
	<link rel="stylesheet" href="../../boot/plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="http://47.100.102.177:8080/app/plugin/jquery.min.js"></script>
	<script src="../../boot/plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <title>推荐页</title>
</head>
<style>
	.thumbnail{
		position: relative;
		top: 80px;
		height: 380px;
		width: 250px;
	}

	#car{
		left: 150px;
		top: 29px;
		width: 100px;
		font-size: 5px;
	}
	.caption>h3{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 15px;
	}

	.caption>h3:hover{
		color: #0C0C0C;
	}
	.caption>p{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 15px;
	}

	.layui-col-space15 {
		margin: -7.5px;
		position: relative;
		top: 100px;
	}
</style>

<body>
	<div class="container">
		<div class='nav'>
			<ul>
				<li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
				<li><a>主页</a></li>
				<li><a href='#'>分类</a>
					<ul>
						<li><a href='../boot/index01'>图书</a></li>
						<li><a href='../boot/index02'>电子书</a></li>
					</ul>
				</li>
				<book:if test="${user!=null}">
					<li><a href='#'>${user.uname}</a>
						<ul>
							<li><a href='../boot/car/shoppingcar?account=${user.account}'>购物车</a></li>
							<li><a href='../boot/personal/center?status=1'>个人信息</a></li>
							<li><a href='../boot/order/order'>订单信息</a></li>
						</ul>
					</li>
					<li><a href="/boot/users/exit">安全退出</a></li>
				</book:if>
				<li><a href='../boot/login'>登陆</a></li>
				<li><a href='../boot/login'>注册</a></li>
			</ul>
		</div>
		<div class="container-fluid">
			<div class="row" id="books">
				<c:forEach items="${esBooks}" var="p">
				<div class="col-md-3">
					<div class="thumbnail" onclick="sendBookId(this)">
						<input type="hidden" class="thisBookId" value="${p.bkId}">
						<img src="${p.pictureUrl}">
						<div class="caption">
							<h3 class="text-center text-success">${p.title}</h3>
							<p class="text-info text-center">${p.author}  出版时间：${p.date}  ${p.compay}</p>
							<p class="text-danger text-center" ><span style="color: red;font-size: 15px">￥<em style="font-style: normal">${p.price}</em></span></p>
						</div>
					</div>
					<div>
						<p class="pull-left">
							<button  type="button" id="car" onclick="add_cart(${p.bkId})" class="btn  btn-danger glyphicon  glyphicon-shopping-cart" >加入购物车
							</button>
						</p>
					</div>
				</div>
				</c:forEach>
			</div>
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md6">
					<div class="layui-panel">
						<i class="layui-icon layui-icon-face-smile-fine" style="font-size: 30px; color: #1E9FFF;"></i>
						<div style="padding: 30px;">
								<h3>根据你的购买记录，我们给你推荐了你可能喜欢的商品！</h3>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
								<i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #FFB800;"></i>
						</div>
					</div>
				</div>
				<hr class="layui-border-blue">
				<c:forEach items="${RecomShop}" var="p">
					<div class="col-md-3">
						<div class="thumbnail" onclick="sendBookId(this)">
							<input type="hidden" class="thisBookId" value="${p.bkId}">
							<img src="${p.pictureUrl}">
							<div class="caption">
								<h3 class="text-center text-success">${p.title}</h3>
								<p class="text-info text-center">${p.author}  出版时间：${p.date}  ${p.compay}</p>
								<p class="text-danger text-center" ><span style="color: red;font-size: 15px">￥<em style="font-style: normal">${p.price}</em></span></p>
							</div>
						</div>
						<div>
							<p class="pull-left">
								<button  type="button" class="car" onclick="add_cart(${p.bkId})" class="btn  btn-danger glyphicon  glyphicon-shopping-cart" >加入购物车
								</button>
							</p>
						</div>
					</div>
				</c:forEach>
	</div>
	</div>
	</div>
		<!-- 定义尾部 -->
		<div class="foot">
			<!-- 多快好省start -->
			<div class="dkhs">
				<ul>
					<li><div class="duo"></div><p>品类齐全，轻松购物</p></li>
					<li><div class="kuai"></div><p>多仓直发，急速配送</p></li>
					<li><div class="hao"></div><p>正平行货，精致服务</p></li>
					<li><div class="sheng"></div><p>天天低价，畅选无忧</p></li>
				</ul>
			</div>
			<!-- 多快好省end -->

			<!-- 结尾start -->
			<div class="jiewei">
				<div class="j1">
					<ul>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">English</a></li>
						<li class="line"></li>
						<li><a href="#">Site</a></li>
						<li class="line"></li>
						<li><a href="#">Media & IR</a></li>
						<li class="line"></li>
					</ul>
				</div>
				<div class="j2">
					<p>云上书屋收录的免费书籍作品、频道内容、书友评论、用户上传文字、图片等其他一切内容及在云上书屋所做之广告均属用户个人行为，与本网站无关。
					</p>
				</div>
				<div class="j3">
					<ul>
						<li class="l1"><a href="#"></a></li>
						<li class="l2"><a href="#"></a></li>
						<li class="l3"><a href="#"></a></li>
						<li class="l4"><a href="#"></a></li>
						<li class="l5"><a href="#"></a></li>
						<li class="l6"><a href="#"></a></li>
					</ul>
				</div>
			</div>
		</div>
</body>
<script>
	function getQueryVariable(variable)
	{
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i=0;i<vars.length;i++) {
			var pair = vars[i].split("=");
			if(pair[0] == variable){return pair[1];}
		}
		return "";
	}
	let title=getQueryVariable("name");
	function watch(id) {
		layer.load(1)
		$.get("/boot/recommendsearch",{name:title,uid:id},function (res) {
			if(res.code=="200"){
				layer.closeAll()
				location.reload()
			}
		})
		location.reload();
	}

	function sendBookId(obj) {
		let bookId = obj.getElementsByClassName("thisBookId")[0].value;
		window.location = '/boot/detail/book?bookId=' + bookId;
	}

	function add_cart(bookId){
			$.get('/boot/car/add',{Id: bookId},function (res) {
				if(res.code=='200') {
					layer.msg('加入购物车成功!')
				}
				else {
					layer.msg("请先进行登陆！")
				}
			})
	}

</script>
</html>